<template>
    <div class="pay-affirm">
        <div class="progressbar-section">
            <div class="progressbar">
                <div class="under-line"></div>
                <div class="progress-item  active">
                    <p class="step">1</p>
                    <p class="dec">购买确认</p>
                </div>
                <div class="progress-item">
                    <p class="step">2</p>
                    <p class="dec">购买记录</p>
                </div>
                <div class="progress-item">
                    <p class="step">3</p>
                    <p class="dec">到店扫码消费</p>
                </div>
            </div>
        </div>
        <div class="goods-info-section">
            <div class="goods-info">
                <div class="cell-info-left">
                    <img :src="payInfo.goodIcon" class="img" />
                </div>
                <div class="cell-info-right">
                    <p class="name">{{payInfo.goodName}}</p>
                    <!-- <p class="good-info">{{goodInfo}}</p> -->
                    <span class="quality">品质服务</span><span class="quality">高端享受</span>
                </div>
                <div class="right">
                    <p class="price"><span class="symbol">&yen;</span>{{payInfo.price}}</p>
                    <p class="num">x{{payInfo.num}}</p>
                </div>
            </div>
            <p class="good-dec">{{payInfo.goodDec}}</p>
            <p class="total-price"><span class="total-word"> 共{{payInfo.num}}件商品 合计：&yen;</span>{{totalPrice}}</p>
            <mt-button size="large" class="wechat-pay-btn" type="default" @click.native="wxPayHandle">微信支付</mt-button>
        </div>
        <div class="foot">
            <p class="phone">客服电话：<a href="tel:4001368868">4001368868</a></p>
            <p class="merchant">本服务由爱梨网络提供支持</p>
        </div>
    </div>
</template>

<script>
import { savaToLocal, loadFromlLocal } from "../../common/js/storage.js"; // 公共方法：本地缓存
import wxpay from "../../common//js/wxpay";
import BScroll from "better-scroll";
import { mapState } from "vuex";
import { Toast, Button } from "mint-ui";
import Vue from "vue";
import "mint-ui/lib/toast/style.css";
import "mint-ui/lib/button/style.css";

Vue.component(Button.name, Button);
Vue.component(Toast.name, Toast);

export default {
  name: "pay-affirm",
  data() {
    return {
      payInfo: {},
      payPam: null,
      clearId: -10000
    };
  },
  components: {},
  mounted() {
    this.payInfo = loadFromlLocal("dianwu2", "payInfo");
  },
  methods: {
    wxPayHandle(event) {
      if (!this.phoneno || this.phoneno == "") {
        //用户未绑定手机号码
        Toast({
          message: "请先绑定手机号码",
          iconClass: "iconfont icon-tishi1",
          duration: 2000
        });
        return;
      }
      this.$http
        .post(this.path + "store/Payment/pay_code", {
          uid: this.userid,
          goodsid: this.payInfo.goodId,
          num: this.payInfo.num
        })
        .then(response => {
          let status=response.body.status;
          if(status!='ok'){
            Toast({message: response.body.msg,duration: 2000});
            return;
          }
          this.payPam = response.body.result;
          this.callpay();
        })
        .catch(response => {
          console.log(response);
        });
    },
    callpay() {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.jsApiCall,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", this.jsApiCall);
          document.attachEvent("onWeixinJSBridgeReady", this.jsApiCall);
        }
      } else {
        this.jsApiCall();
      }
    },
    //JSON.parse(payPam.result),
    jsApiCall() {
      WeixinJSBridge.invoke("getBrandWCPayRequest", this.payPam, res => {
        WeixinJSBridge.log(res.err_msg);
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          //to url
          this.PaySuccess();
          //window.location.href = "../main/myOrder.html";
        }
      });
    },
    PaySuccess() {
      Toast({
        message: "支付成功!",
        iconClass: "iconfont icon-msnui-success",
        duration: 2000
      });
      let self = this;
      self.clearId = setTimeout(function() {
        self.$router.replace({path: "/me"});
      }, 1000);
    }
  },
  beforeDestroy() {
    if (this.clearId != -10000) {
      clearTimeout(this.clearId);
    }
  },
  computed: {
    ...mapState(["path", "userid", "phoneno"]),
    totalPrice() {
      return this.payInfo.num * this.payInfo.price;
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.pay-affirm {
    position: relative;
    height: 100%;

    .progressbar-section {
        background-color: #f5f5f5;
        height: 0.9rem;
        display: flex;
        align-items: center;

        .progressbar {
            display: flex;
            width: 100%;
            position: relative;

            .under-line {
                left: 15%;
                right: 15%;
                top: 0.135rem;
                position: absolute;
                z-index: 1;
                height: 0.03rem;
                background-color: #ffffff;
            }

            .progress-item {
                text-align: center;
                flex: 1;
                display: inline-block;
                position: relative;
                z-index: 2;

                .step {
                    width: 0.3rem;
                    line-height: 0.3rem;
                    font-size: 0.14rem;
                    color: #707070;
                    background: #fff;
                    border-radius: 100%;
                    margin: 0 auto 0.08rem auto;
                    font-weight: 700;
                }

                .dec {
                    list-style-type: none;
                    color: #707070;
                    font-size: 0.13rem;
                }

                &.active {
                    .step {
                        background: #aaa;
                        color: #fff;
                        font-size: 0.15rem;
                    }

                    .dec {
                        color: #707070;
                        font-weight: 700;
                    }
                }
            }
        }
    }

    .goods-info-section {
        padding: 0 0.13rem;
        box-sizing: border-box;

        .goods-info {
            height: 0.8rem;
            display: flex;
            align-items: center;
            border-bottom: 1px #aaa dashed;

            .cell-info-left {
                .img {
                    width: auto;
                    height: 0.55rem;
                    background-color: #f1f1f1;
                    border-radius: 0.02rem;
                }
            }

            .cell-info-right {
                margin-left: 0.09rem;
                flex: 1;
                align-self: flex-start;

                .name {
                    font-size: 0.13rem;
                    line-height: 0.17rem;
                    color: #303030;
                    font-weight: 700;
                    margin-top: 0.16rem;
                    margin-bottom: 0.06rem;
                }

                .good-info {
                    margin-top: 0.04rem;
                    margin-bottom: 0.02rem;
                    font-size: 0.13rem;
                    color: #707070;
                }

                .quality {
                    display: inline-block;
                    color: #f2a5ba;
                    font-size: 0.12rem;
                    padding: 0.02rem 0.04rem 0.01rem 0.04rem;
                    border-radius: 0.04rem;
                    border: 1px #f8cbd6 solid;
                    margin-right: 0.02rem;
                }
            }

            .right {
                text-align: right;

                .price {
                    color: #e61874;
                    font-size: 0.15rem;

                    .symbol {
                        font-size: 0.13rem;
                        margin-right: 0.02rem;
                    }
                }

                .num {
                    margin-top: 0.04rem;
                    font-size: 0.14rem;
                    color: #707070;
                    letter-spacing: 0.01rem;
                }
            }
        }

        .good-dec {
            font-size: 0.13rem;
            line-height: 0.18rem;
            color: #707070;
            padding: 0.1rem 0 0.08rem 0;
            border-bottom: 1px #aaa solid;
        }

        .total-price {
            width: 100%;
            color: #e61874;
            font-size: 0.16rem;
            display: inline-block;
            text-align: right;
            // font-weight: 700;
            margin-top: 0.08rem;

            .total-word {
                margin-right: 0.03rem;
                font-size: 0.14rem;
            }
        }

        .wechat-pay-btn {
            background-color: #b37287;
            color: #fff;
            box-shadow: none;
            margin-top: 0.55rem;
            opacity: 0.9;
            font-size: 0.12rem;
            letter-spacing: 0.02rem;
            height: 0.3rem;
        }
    }

    .foot {
        width: 100%;
        position: absolute;
        bottom: 8px;
        text-align: center;

        p {
            font-size: 0.12rem;
            line-height: 0.18rem;
            color: #515151;

            a {
                color: #000;
                text-decoration: underline;
            }
        }
    }
}
</style>
